﻿<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>  
    <!-- 引入 echarts.js -->  
   <script src="static/echarts.min.js"></script>
<script src="static/jquery-3.2.1.js"></script>
<script src="static/china.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 1000px;height:900px;"></div>  
    <script type="text/javascript">  
        // 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
  
        // 指定图表的配置项和数据  
        var data = [];
var geoCoordMap = {};
$.post('servlet/MapCoordinate').done(function(dataformback) {
data = eval(dataformback);
var convertData = function () {
    var res = [];
    for (var i = 0; i < data.length; i++) {
            res.push({
                name: data[i].cityName,
                value: [data[i].lng,data[i].lat,data[i].pv]
            });
        
    }
   // console.log(res);
    return res;
};

option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        x:'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ' : ' + params.value[2];
        }
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['pm2.5'],
        textStyle: {
            color: '#fff'
        }
    },
    visualMap: {
        min: 200,
        max: 1500,
        calculable: true,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam:true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(),
            symbolSize:function (val) {
                if( val[2]!=0)
                return 12;
                else
                return 0;
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            }
        }
       /* {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData().slice(0, 6),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
        */
    ]
};

  
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option); 
        
        });
 
    </script>  
</body>  
</html>  